<template>
  <map 
    style="height: 100vh; width: 100vw;"
    :latitude="latitude"
    :longitude="longitude"
    :markers="markers"
  ></map>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 定义响应式变量
const latitude = ref('');
const longitude = ref('');
const markers = ref([{
  id: 0,
  latitude: 0,
  longitude: 0,
  iconPath: '/static/marker.png', // 标记图标路径
  width: 30,
  height: 40
}]);

// 获取当前位置
const getLocation = () => {
  uni.getLocation({
    type: 'wgs84', // 坐标类型（WGS-84标准GPS坐标）
    success: (res) => {
      latitude.value = res.latitude;
      longitude.value = res.longitude;
      // 更新标记点位置
      markers.value[0].latitude = res.latitude;
      markers.value[0].longitude = res.longitude;
    },
    fail: (err) => {
      uni.showModal({
        content: '获取定位失败，请检查权限设置',
        showCancel: false
      });
    }
  });
};

// 页面加载时触发
onMounted(() => {
  getLocation();
});
</script>